<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
vue指令
带有v-前缀的特殊标签属性,不同属性对应不同的功能

v-bind 动态设置标签属性，如src url，title等
语法：v-bind:属性名=“表达式”
v-bind:src 可以简写成 :src

-->

<body>
    <div id="app">
        <img v-bind:src="imageUrl" :title="msg">
        <button @click="changeImg">切换图片</button>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                c: false,
                imageUrl: './images/image2.png',
                msg: '测试'
            },
            methods: {
                changeImg() {
                    console.log(this.imageUrl)
                    this.c = !this.c
                    console.log(this.c)
                    this.imageUrl = this.c ? './images/image1.png' : './images/image2.png'
                    this.msg = this.imageUrl
                }
            }
        })
    </script>

</body>

</html>